<div id="main" style="height:500px;border:1px solid #ccc;padding:10px;"></div>
<div id="mainMap" style="height:500px;border:1px solid #ccc;padding:10px;"></div>
<script type="text/javascript">
	// Step:3 echarts & zrender as a Global Interface by the echarts-plain.js.
	// Step:3 echarts和zrender被echarts-plain.js写入为全局接口
	var myChart = echarts.init(document.getElementById('main'));
	var option = {
	    tooltip : {
	        trigger: 'axis'
	    },
	    toolbox: {
	        show : true,
	        y: 'bottom',
	        feature : {
	            mark : {show: true},
	            dataView : {show: true, readOnly: false},
	            magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
	            restore : {show: true},
	            saveAsImage : {show: true}
	        }
	    },
	    calculable : true,
	    legend: {
	        data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎','百度','谷歌','必应','其他']
	    },
	    xAxis : [
	        {
	            type : 'category',
	            splitLine : {show : false},
	            data : ['周一','周二','周三','周四','周五','周六','周日']
	        }
	    ],
	    yAxis : [
	        {
	            type : 'value',
	            position: 'right'
	        }
	    ],
	    series : [
	        {
	            name:'直接访问',
	            type:'bar',
	            data:[320, 332, 301, 334, 390, 330, 320]
	        },
	        {
	            name:'邮件营销',
	            type:'bar',
	            tooltip : {trigger: 'item'},
	            //stack: '广告',
	            data:[120, 132, 101, 134, 90, 230, 210]
	        },
	        {
	            name:'联盟广告',
	            type:'bar',
	            tooltip : {trigger: 'item'},
	            //stack: '广告',
	            data:[220, 182, 191, 234, 290, 330, 310]
	        },
	        {
	            name:'视频广告',
	            type:'bar',
	            tooltip : {trigger: 'item'},
	            //stack: '广告',
	            data:[150, 232, 201, 154, 190, 330, 410]
	        },
	        {
	            name:'搜索引擎',
	            type:'line',
	            data:[862, 1018, 964, 1026, 1679, 1600, 1570]
	        },
	
	        {
	            name:'搜索引擎细分',
	            type:'pie',
	            tooltip : {
	                trigger: 'item',
	                formatter: '{a} <br/>{b} : {c} ({d}%)'
	            },
	            center: [160,130],
	            radius : [0, 50],
	            itemStyle :　{
	                normal : {
	                    labelLine : {
	                        length : 20
	                    }
	                }
	            },
	            data:[
	                {value:1048, name:'百度'},
	                {value:251, name:'谷歌'},
	                {value:147, name:'必应'},
	                {value:102, name:'其他'}
	            ]
	        }
	    ]
	};
	
	myChart.setOption(option);
	/*myChart.setOption({
		tooltip : {
			trigger : 'axis'
		},
		legend : {
			data : ['蒸发量', '降水量']
		},
		toolbox : {
			show : true,
			feature : {
				mark : {
					show : true
				},
				dataView : {
					show : true,
					readOnly : false
				},
				magicType : {
					show : true,
					type : ['line', 'bar']
				},
				restore : {
					show : true
				},
				saveAsImage : {
					show : true
				}
			}
		},
		calculable : true,
		xAxis : [{
			type : 'category',
			data : ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
		}],
		yAxis : [{
			type : 'value',
			splitArea : {
				show : true
			}
		}],
		series : [{
			name : '蒸发量',
			type : 'bar',
			data : [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
		}, {
			name : '降水量',
			type : 'bar',
			data : [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
		}]
	});*/

	// --- 地图 ---
	var myChart2 = echarts.init(document.getElementById('mainMap'));
	myChart2.setOption({
		tooltip : {
			trigger : 'item',
			formatter : '{b}'
		},
		series : [{
			name : '中国',
			type : 'map',
			mapType : 'china',
			selectedMode : 'multiple',
			itemStyle : {
				normal : {
					label : {
						show : true
					}
				},
				emphasis : {
					label : {
						show : true
					}
				}
			},
			data : [{
				name : '广东',
				selected : true
			}]
		}]
	});

</script>